<template>
  <main-content title="商品审核">
    <template #tab-bar>
      <el-radio-group v-model="currentFilter" @change="handleFilterChange">
        <el-radio-button v-for="(item, index) in filterList" :key="index" plain style="margin-bottom: 4px;"
          :label="item.value">
          {{ `${item.label}（${item.count}）` }}
        </el-radio-button>
      </el-radio-group>
    </template>
    <template #search-bar>
      <SearchBar>
        <template #normal>
          <el-form-item label="商品名称">
            <el-input v-model.trim="form.name" clearable placeholder="请输入商品名称" />
          </el-form-item>
          <el-form-item label="商家名称">
            <el-select v-model="form.storeId" filterable clearable placeholder="选择商家">
              <el-option v-for="item in storeList" :key="item.id" :label="item.storeName" :value="item.id" />
            </el-select>
          </el-form-item>
        </template>
      </SearchBar>
    </template>

    <LayoutTable ref="layoutTableRefs" url="merchant/store/goods/applyPager" :param="{ ...form, status: status }"
      :row-key="(row: any) => {
        return String(row.id);
      }
        ">
      <el-table-column prop="title" label="操作" min-width="120" />
      <el-table-column prop="goodsImg" label="商品图片" min-width="120">
        <template #default="scope">
          <el-image fit="contain" :src="scope.row.goodsImg" style="width: 80px; height: 80px"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="relationName" label="商品名称" min-width="120" />
      <el-table-column prop="storeName" label="商家名称" min-width="120" />

      <el-table-column prop="status" label="审核状态" width="120">
        <template #default="scope">
          <el-tag :type="questionType[scope.row.status].tag">
            {{ questionType[scope.row.status].label }}
          </el-tag>
          <el-popover
          v-if="scope.row.status==2"
            placement="top-start"
            title="拒绝原因:"
            :content="scope.row.applyRemark"
            trigger="hover"
          >
            <template #reference>
              <el-icon style="margin-left: 10px;font-size: 14px;"><ChatLineSquare /></el-icon>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="提交时间" width="180">
        <template #default="scope">
          {{ dateFormat(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="审核时间" width="180">
        <template #default="scope">
          {{ scope.row.checkTime ? dateFormat(scope.row.checkTime) : '' }}
        </template>
      </el-table-column>
      <el-table-column prop="checkUserName" label="操作人" min-width="120" />
      <el-table-column label="操作" align="center" fixed="right" width="100">
        <template #default="scope">
          <el-button v-if="scope.row.status == 0" link type="primary" @click="toVerify(scope.row.id)">
            审核
          </el-button>
          <el-button v-else link type="primary" @click="toVerify(scope.row.id)">
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </LayoutTable>
  </main-content>
</template>
<script lang="ts">
export default {
  name: "VerifyGoods",
};
</script>
<script lang="ts" setup>
import { dateFormat } from "@/utils/filters";
import { goodsApplyStats, merchantList } from "@/api/verify";
import type { FormInstance } from "element-plus";
const router = useRouter();
const statusMerchantForm = ref<FormInstance>();
const layoutTableRefs = ref();
const onSearch = () => {
  layoutTableRefs.value.search()
};
const questionType = {
  0: { label: "待审核", tag: "" },
  1: { label: "通过", tag: "success" },
  2: { label: "拒绝", tag: "warning" },
};
let statusForm = ref({
  status: '',
  remark: "",
});
const statusFormVisible = ref(false);
const statusRules = reactive({
  status: [
    {
      message: "请选择",
      required: true,
      trigger: "blur",
    },
  ],
  remark: [
    {
      message: "请填写原因",
      validator: (rule: any, value: any, callback: any) => {
        if (statusForm.value.status == 2 && value === '') {
          callback(new Error("请填写原因"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
});
const resetStatusForm = () => {
  statusForm.value = {
    status: '',
    remark: "",
  };
  statusMerchantForm.value?.resetFields();
  statusFormVisible.value = false;
};
const tokensManage = ref();
const currentFilter = ref(0);

const filterList = ref([
  {
    label: "待审核",
    value: 0,
    count: 0,
  },
  {
    label: "通过",
    value: 1,
    count: 0,
  },
  {
    label: "拒绝",
    value: 2,
    count: 0,
  },
  {
    label: "全部",
    value: "",
    count: 0,
  },
]);
const form = reactive({
  name: "",
  storeId: "",
});
const storeList = ref([]);
const getStoreList = async () => {
  const rs: any = await merchantList({});
  if (rs.code === 200) {
    storeList.value = rs.payload;
  }
};

watch(form, () => {
  getCount()
})

const status = ref(0)
const handleFilterChange = (radioValue: any) => {
  if (Number(radioValue) === -1) {
    status.value = "";
  } else {
    status.value = radioValue;
  }
};

const getCount = async () => {
  const rs: any = await goodsApplyStats({});
  if (rs.code === 200) {
    filterList.value[0].count = rs.payload.checkNum;
    filterList.value[1].count = rs.payload.passNum;
    filterList.value[2].count = rs.payload.refuseNum;
    filterList.value[3].count = rs.payload.total;
  }
}
const toVerify = (id: number) => {
  router.push({
    path: `/merchant/verify/goods/detail`,
    query: {
      id: id,
    },
  });
}
onBeforeMount(() => {
  getStoreList();
  getCount();
});
</script>
<style lang="scss">
.el-table .blue-row {
  --el-table-tr-bg-color: #e4e9ff;
}
</style>
<style lang="scss" scoped>
.table-wrapper {
  margin-bottom: 20px;
}

.pagination-wrapper {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.cus-select {
  margin-left: 12px;

  :deep(.el-dropdown__caret-button) {
    margin-left: -4px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}
</style>
